<template>
  <div>
    <div class="seed_top_banner">
      <div class="seed_back_arrow" @click="back">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zuo"></use>
        </svg>
      </div>
      <div class="seed_page_title"><span>拼团管理</span></div>
      <div class="seed_page_tool"></div>
    </div>
    <div class="seed_ord_body">
      <div class="seed_ord_head">
        <div class="seed_ord_navbar">
          <!--循环-->
          <div v-for="(item,index) in navbar" class="seed_ord_itema" @click="navbarTap(index)" v-bind:key="index">
            <span :class="currentTab==index?'seed_ord_active_navbar':''">{{item}}</span>
            <div class="seed_ord_suba" :class="currentTab==index?'seed_ord_suba_active':''"></div>
          </div>
        </div>
      </div>
      <div class="seed_list_secondo">
        <!--进行中-->
        <div v-if = "currentTab == 0"
           v-infinite-scroll="loadMoreNotice"
           infinite-scroll-disabled="false"
           infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false">
          <!--每一个活动-->
          <div class="seed_list_second_list" v-for="(item ,index) in list" v-bind:key="index">
            <div class="seed_bargain_second_ddh">
              <span>活动时间:&ensp;</span>
              <u>{{item.group_start_time}}~{{item.group_end_time}}</u>
            </div>
            <div class="seed_list_second_cbox">
              <div class="show-img">
                <img v-bind:src="item.goods_img" @load="successLoadImg" @error="errorLoadImg">
              </div>
              <div class="seed_list_second_cbox_r">
                <span class="seed_list_second_cbox_r_t">{{item.goods_name}}</span>
                <div class="seed_list_second_cbox_b">
                  <div class="seed_list_second_cbox_b_l">
                    <span>{{item.activity_number}}人团 ￥{{item.activity_money}}&emsp;</span>
                    <s style="text-decoration:line-through; color: #9e9e9e">￥{{item.oral_price}}</s>
                  </div>
                </div>
              </div>
            </div>
            <div class="seed_list_second_b">
              <div>
                <span>参与人数:</span>
                <u>{{item.join_count}}人</u>
              </div>
              <div>
                <span>限购: {{item.buy_limit}}件</span>
              </div>
            </div>
            <div class="seed_list_second_b_b">
              <div class="seed_list_second_b_b_l" @click="deal(item.id, index, 0)">关闭</div>
              <router-link class="seed_list_second_b_b_r" :to="{name: 'activity-group_edit', params: {id: item.id, tab: 0}}">编辑</router-link>
            </div>
          </div>
          <!--每一个活动到这-->
        </div>
        <!--待完成-->
        <div v-else-if="currentTab == 1"
           v-infinite-scroll="loadMoreNotice"
           infinite-scroll-disabled="false"
           infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false">
          <!--每一个活动-->
          <div class="seed_list_second_list" v-for="(item ,index) in list" v-bind:key="index">
            <div class="seed_bargain_second_ddh">
              <span>活动时间:&ensp;</span>
              <u>{{item.group_start_time}}~{{item.group_end_time}}</u>
            </div>
            <div class="seed_list_second_cbox">
              <div class="show-img">
                <img v-bind:src="item.goods_img" @load="successLoadImg" @error="errorLoadImg">
              </div>
              <div class="seed_list_second_cbox_r">
                <span class="seed_list_second_cbox_r_t">{{item.goods_name}}</span>
                <div class="seed_list_second_cbox_b">
                  <div class="seed_list_second_cbox_b_l">
                    <span>{{item.activity_number}}人团 ￥{{item.activity_money}}&emsp;</span>
                    <s style="text-decoration:line-through; color: #9e9e9e">￥{{item.oral_price}}</s>
                  </div>
                </div>
              </div>
            </div>
            <div class="seed_list_second_b">
              <div>
                <span>参与人数:</span>
                <u>{{item.join_count}}人</u>
              </div>
              <div>
                <span>限购: {{item.buy_limit}}件</span>
              </div>
            </div>
            <div class="seed_list_second_b_b">
              <div class="seed_list_second_b_b_l" @click="deal(item.id, index, 0)">关闭</div>
              <router-link class="seed_list_second_b_b_r" :to="{name: 'activity-group_edit', params: {id: item.id, tab: 1}}">编辑</router-link>
            </div>
          </div>
          <!--每一个活动到这-->
        </div>
        <!--已关闭-->
        <div v-else-if="currentTab==2"
           v-infinite-scroll="loadMoreNotice"
           infinite-scroll-disabled="false"
           infinite-scroll-distance="0"
           infinite-scroll-immediate-check="false">
          <!--每一个活动-->
          <div class="seed_list_second_list" v-for="(item ,index) in list" v-bind:key="index">
            <div class="seed_bargain_second_ddh">
              <span>活动时间:&ensp;</span>
              <u>{{item.group_start_time}}~{{item.group_end_time}}</u>
            </div>
            <div class="seed_list_second_cbox">
              <div class="show-img">
                <img v-bind:src="item.goods_img" @load="successLoadImg" @error="errorLoadImg">
              </div>
              <div class="seed_list_second_cbox_r">
                <span class="seed_list_second_cbox_r_t">{{item.goods_name}}</span>
                <div class="seed_list_second_cbox_b">
                  <div class="seed_list_second_cbox_b_l">
                    <span>{{item.activity_number}}人团 ￥{{item.activity_money}}&emsp;</span>
                    <s style="text-decoration:line-through; color: #9e9e9e">￥{{item.oral_price}}</s>
                  </div>
                </div>
              </div>
            </div>
            <div class="seed_list_second_b">
              <div>
                <span>参与人数:</span>
                <u>{{item.join_count}}人</u>
              </div>
              <div>
                <span>限购: {{item.buy_limit}}件</span>
              </div>
            </div>
            <div class="seed_list_second_b_b">
              <div class="seed_list_second_b_b_l" @click="deal(item.id, index, 1)">开启</div>
              <router-link class="seed_list_second_b_b_r" :to="{name: 'activity-group_edit', params: {id: item.id, tab: 2}}">编辑</router-link>
            </div>
          </div>
          <!--每一个活动到这-->
        </div>
        <loading-more :allLoaded="allLoaded" :show="list.length > 0"></loading-more>
        <empty-data :show="allLoaded && list.length <= 0" style="margin-top: 1rem"></empty-data>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      navbar: ['进行中', '已结束', '已关闭'],
      currentTab: 0,
      list: [],
      time: [],
      date: [],
      param: {
        page: 1,
        page_size: 5,
        type: ''
      },
      allLoaded: false,
      loading: false
    }
  },
  created () {
    let tab = this.$route.params.tab
    if (tab !== undefined && tab >= 0) {
      this.currentTab = tab
    }
    this.getActList()
  },
  methods: {
    navbarTap (index) {
      this.param.page = 1
      this.currentTab = index
      this.list = []
      this.getActList()
      this.allLoaded = false
    },
    deal (id, index, type) {
      let tip = '确定要关闭该活动'
      if (type === 1) {
        tip = '确定要开启该活动'
      }
      this.$MessageBox.confirm(tip).then(action => {
        let param = {
          id: id,
          type: type
        }
        this.$request.GroupDeal(param).then(data => {
          this.$toast('操作成功')
          this.list.splice(index, 1)
        })
      })
    },
    getActList () {
      let idx = this.currentTab
      this.param.type = parseInt(idx) + 1
      this.loading = true
      this.$request.GroupList(this.param).then(data => {
        if (this.param.page_size > data.length) {
          this.allLoaded = true
        }
        this.list = [...this.list, ...data]
      }).finally(() => {
        this.loading = false
      })
    },
    back () {
      this.$router.push({name: 'Home'})
    },
    loadMoreNotice () {
      if (this.loading || this.allLoaded) { // 正在加载 或 已取得全部数据
        return
      }
      setTimeout(() => {
        ++this.param.page
        this.getActList()
      }, 300)
    }
  }
}
</script>
